<template>
  <div>
    <div class="container">
      <div class="row">
        <div class="colum">row1-col1</div>
        <div class="colum">row1-col2</div>
        <div class="colum">row1-col3</div>
      </div>
      <div class="row">
        <div class="colum">row2-col1</div>
        <div class="colum">row2-col2</div>
        <div class="colum">row2-col3</div>
      </div>
      <div class="row">
        <div class="colum">row3-col1</div>
        <div class="colum">row3-col2</div>
        <div class="colum">row3-col3</div>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
.container {
  padding: 10px;
  background-color: skyblue;
  display: grid;
  /* 定义行的高度 */
  /* 3行  高度分别为 100px 200px 100px  grid-template-rows: 100px 200px 100px; */
  /* 多行 首行100px 其他内容决定 */
  grid-template-rows: 100px auto;

  /* 定义列的宽度 */

  /* 1. 给出具体值 */
  /* grid-template-columns: 100px 200px 100px; */
  /* 2. 按比例 重复 */
  /* grid-template-columns: 1fr 1fr 1fr; */
  /* grid-template-columns: repeat(3, 1fr);  */
  /* 3. 混合写法 */
  grid-template-columns: 100px 1fr 2fr;

  /* 定义行与列之间的间隔  row-gap 行间距  colum-gap 列间距  gap 行+列的简写*/
  gap: 10px 20px;
}
.row {
  padding: 10px;
  background-color: #fff;
}
.colum {
  background-color: pink;
}
</style>